<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { PropType } from 'vue';
import { $t } from '@vben/locales';
import { UploadIcon } from './index';
defineOptions({ name: 'Query' });

interface FooterType {
  showFooter: boolean;
  provideContent: string;
  phone: string;
  email: string;
  publicAccount: {
    code: string;
    desc: string;
  };
  service: {
    code: string;
    desc: string;
  };
}
const props = defineProps({
  footer: {
    type: Object as PropType<FooterType>,
    required: true,
  }
});

const fontSizeList = ref<{ label: string; value: number }[]>([])

onMounted(() => {
  fontSizeList.value = Array.from({ length: 51 }, (_, index) => index + 10).map((item: number) => {
    return {
      label: `${item}px`,
      value: item
    }
  })
})

const emit = defineEmits(['update:modelValue', 'queryData', 'resetQuery']);

</script>
<template>
  <div class="w-full h-full overflow-scroll pr-[1px]">
    <el-form class="w-full" label-width="70px">
      <el-form-item class="w-full" :label="$t('certificate.settingFooter.provideContent')">
        <el-switch class="mr-[12px]" v-model="props.footer.showFooter" :active-value="true" :inactive-value="false" />
      </el-form-item>
      <div v-show="props.footer.showFooter"
        class="w-full font-bold text-[14px] leading-[22px] text-[#191919] mb-[16px]">{{
          $t('certificate.settingBanner.textContent') }}</div>
      <div v-if="props.footer.showFooter">
        <el-form-item class="w-full">
          <template #label>
            <div class="w-hull text-right">{{ $t('certificate.settingFooter.textContent') }}</div>
          </template>
          <template #default>
            <el-input v-model="props.footer.provideContent" type="textarea" show-word-limit :maxlength="100" :rows="3"
              class="w-full" :placeholder="$t('certificate.settingFooter.textContent')"></el-input>
          </template>
        </el-form-item>
        <el-form-item class="w-full" :label="$t('certificate.settingFooter.phone')">
          <el-input type="textarea" v-model="props.footer.phone" maxlength="255" show-word-limit class="w-full" :rows="3"
            :placeholder="$t('common.inputPhTxt', [$t('certificate.settingFooter.phone')])"></el-input>
        </el-form-item>
        <el-form-item class="w-full" :label="$t('certificate.settingFooter.email')">
          <el-input type="textarea" v-model="props.footer.email" maxlength="255" show-word-limit class="w-full" :rows="3"
            :placeholder="$t('common.inputPhTxt', [$t('certificate.settingFooter.email')])"></el-input>
        </el-form-item>
        <div class="w-full font-bold text-[14px] leading-[22px] text-[#191919] mb-[16px]">{{
          $t('certificate.settingFooter.publicAccount') }}</div>
        <el-form-item class="w-full" :label="$t('certificate.settingFooter.qrCode')">
          <div class="w-full">
            <div class="flex justify-between">
              <UploadIcon v-model:icon="props.footer.publicAccount.code" :border-radius="'4px'" :show-btn-txt="true" />
              <div class="flex-1 text-[#AEAEAE] text-[12px] leading-[20px] ml-[25px]">{{ $t('certificate.supportFormat',
                {
                  size:
                '64X64' }) }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="w-full" :label="$t('certificate.settingFooter.textContentDesc')">
          <el-input v-model="props.footer.publicAccount.desc" maxlength="100" class="w-full"
            :placeholder="$t('common.inputPhTxt', [$t('certificate.settingFooter.textContentDesc')])"></el-input>
        </el-form-item>
        <div class="w-full font-bold text-[14px] leading-[22px] text-[#191919] mb-[16px]">{{
          $t('certificate.settingFooter.service') }}</div>
        <el-form-item class="w-full" :label="$t('certificate.settingFooter.qrCode')">
          <div class="w-full">
            <div class="flex justify-between">
              <UploadIcon v-model:icon="props.footer.service.code" :border-radius="'4px'" :show-btn-txt="true" />
              <div class="flex-1 text-[#AEAEAE] text-[12px] leading-[20px] ml-[25px]">{{ $t('certificate.supportFormat',
                {
                  size:
                '64X64' }) }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="w-full" :label="$t('certificate.settingFooter.textContentDesc')">
          <el-input v-model="props.footer.service.desc" maxlength="100" class="w-full"
            :placeholder="$t('common.inputPhTxt', [$t('certificate.settingFooter.textContentDesc')])"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-button+.el-button) {
  margin-left: 0;
}

.play-icon {
  cursor: pointer;
  transition: transform 0.2s;
}

.play-icon-active {
  transform: rotate(90deg) scale(0.6);
  transition: transform 0.2s;
}
</style>
